<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人信息</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        accent: '#0EA5E9',
                        neutral: '#F1F5F9',
                        'neutral-dark': '#334155'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .card-shadow {
                @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-neutral-dark min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <span class="text-primary font-bold text-xl">教育管理系统</span>
            </div>
            <div class="flex items-center space-x-4">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">
                    <i class="fa fa-home"></i> 首页
                </a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">
                    <i class="fa fa-bell"></i> 通知
                </a>
                <div class="relative group">
                    <button class="flex items-center space-x-2 text-gray-600 hover:text-primary transition-colors duration-200">
                        <i class="fa fa-user-circle"></i>
                        <span>${user.name}</span>
                        <i class="fa fa-chevron-down text-xs"></i>
                    </button>
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-user-circle mr-2"></i>个人信息
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-cog mr-2"></i>设置
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- 主内容区 -->
<main class="flex-grow flex items-center justify-center p-4 sm:p-6 lg:p-8">
    <div class="w-full max-w-2xl">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
            <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-800 mb-2">修改个人信息</h1>
            <p class="text-gray-600">更新您的账户信息和设置</p>
        </div>

        <!-- 表单卡片 -->
        <div class="bg-white rounded-xl card-shadow overflow-hidden">
            <div class="p-6 sm:p-8">
                <form action="${pageContext.request.contextPath}/teacher/update" method="post" class="space-y-6">
                    <input type="hidden" name="uid" value="${user.uid}">

                    <!-- 姓名 -->
                    <div class="space-y-2">
                        <label for="name" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-user mr-1"></i> 姓名
                        </label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-user"></i>
                                </span>
                            <input type="text" name="name" id="name" value="${user.name}"
                                   class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-300 rounded-lg text-gray-500 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200">
                        </div>
                    </div>

                    <!-- 用户名 -->
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-user-circle mr-1"></i> 用户名
                        </label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-user-circle"></i>
                                </span>
                            <input type="text" name="username" id="username" value="${user.username}"
                                   class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-lock mr-1"></i> 密码
                        </label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-lock"></i>
                                </span>
                            <input type="password" name="password" id="password" value="${user.password}"
                                   class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
                        </div>
                    </div>

                    <!-- 电话 -->
                    <div class="space-y-2">
                        <label for="number" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-phone mr-1"></i> 电话
                        </label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-phone"></i>
                                </span>
                            <input type="text" name="number" id="number" value="${user.number}"
                                   class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
                        </div>
                    </div>

                    <!-- 邮箱 -->
                    <div class="space-y-2">
                        <label for="email" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-envelope mr-1"></i> 邮箱
                        </label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-envelope"></i>
                                </span>
                            <input type="text" name="email" id="email" value="${user.email}"
                                   class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
                        </div>
                    </div>

                    <!-- 积分 -->
                    <div class="space-y-2">
                        <label for="scorenum" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-star mr-1"></i> 积分
                        </label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-star"></i>
                                </span>
                            <input type="text" name="scorenum" id="scorenum" value="${user.scorenum}"
                                   class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
                        </div>
                    </div>

                    <!-- 角色 -->
                    <div class="space-y-2">
                        <label for="role" class="block text-sm font-medium text-gray-700">
                            <i class="fa fa-id-card mr-1"></i> 角色
                        </label>
                        <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-id-card"></i>
                                </span>
                            <select id="role" name="role"
                                    class="block w-full pl-10 pr-10 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus appearance-none transition-all duration-200">
                                <option value="2">教师</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400">
                                <i class="fa fa-chevron-down text-xs"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="pt-2 flex flex-col sm:flex-row gap-4">
                        <button type="submit"
                                class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                            <i class="fa fa-check mr-2"></i> 提交修改
                        </button>
                        <a href="javascript:history.back()"
                           class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
                            <i class="fa fa-arrow-left mr-2"></i> 返回
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200">
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-500 text-sm">© 2025 教育管理系统. 保留所有权利.</p>
            <div class="flex space-x-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
                    <i class="fa fa-question-circle"></i> 帮助中心
                </a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
                    <i class="fa fa-file-text-o"></i> 隐私政策
                </a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
                    <i class="fa fa-phone"></i> 联系我们
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 表单输入效果
    document.querySelectorAll('input, select').forEach(input => {
        if (input.value.trim() !== '') {
            input.classList.add('border-primary');
        }

        input.addEventListener('focus', () => {
            input.classList.add('border-primary');
        });

        input.addEventListener('blur', () => {
            if (input.value.trim() === '') {
                input.classList.remove('border-primary');
            }
        });
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
</script>
</body>
</html>
